<template>
	<view class="concats-adress">
		<phoneSimuHead :titleTxt="titleTxt"></phoneSimuHead>
		<view class="tit-box">
			<view class="arrow-txt"><text class="icon-font" >&#xe604;</text></view>
			<view class="tit-txt">确认订单</view>
			<view class="c-txt">联系商家</view>
		</view>
		<view class="ac-box">
			<view class="c-b cb-cloum">
				<view class="cb-lb">填写联系信息</view>
				<view class="cb-tip">为了商家发货，请先填写您的联系信息</view>
			</view>
			<view class="c-b cb-align-center">
				<view class="cb-txt-lb">姓名</view>
				<input class="input-name" v-model="cName" maxlength="30" placeholder="请输入姓名" placeholder-style="font-size:28upx;color:#999"/>
			</view>
			<view class="c-b cb-align-center">
				<view class="cb-txt-lb">联系电话</view>
				<input class="input-phone" v-model="cellPhone" maxlength="11" placeholder="请输入联系电话" placeholder-style="font-size:28upx;color:#999"/>
			</view>
		</view>
		
		<view class="ac-box">
			<view class="c-b a-c-rows">
				<view>省、市、区 请选择地区</view>
				<text class="icon-font" >&#xe600;</text>
			</view>
			<view class="c-b">
				<input class="input-adress" v-model="adressTxt" maxlength="50" placeholder="请输入联系地址"  placeholder-style="font-size:28upx;color:#999"/>
			</view>
		</view>
		
		<view class="save-btn">保存</view>
		
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	export default{
		components:{phoneSimuHead},
		data(){
			return{
				titleTxt:"",
				adressTxt:"",
				cName:"",
				cellPhone:"",
			}
		},
		created() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		
		mounted() {
			
		},
		
		methods: {
		  
		},
	}
</script>

<style lang="scss">
	.concats-adress
	{
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 28upx;
		.tit-box
		{
			border-top:1upx solid #eee;
			background-color: #FFF;
			display: flex;
			padding: 20upx 20upx;
			text-align: center;
			align-items: center;
			justify-content: center;
			position: relative;
			color: #333;
			.arrow-txt
			{
				position: absolute;
				left: 20upx;
				font-size: 30upx;
			}
			
			.tit-txt
			{
				font-size: 30upx;
			}
			.c-txt
			{
				color:#f44848;
				position: absolute;
				right: 20upx;
			}
		}
		
		.ac-box
		{
			margin-top: 20upx;
			background-color: #FFF;
			border-top: 1upx solid #EEE;
			.c-b
			{
				display: flex;
				padding: 20upx 20upx;
				border-bottom: 1upx solid #EEE;
				.cb-txt-lb
				{
					width: 150upx;
				}
				
				.cb-tip
				{
					color: #999;
				}
				
				.input-phone,.input-name,.input-adress
				{
					width:100% ;
				}
			}
			.cb-cloum
			{
				flex-direction: column;
			}
			
			.a-c-rows
			{
				justify-content: space-between;
			}
			
			.cb-align-center
			{
				align-items: center;
			}
		}
		
		.save-btn
		{
			background-color: #f44848;
			color: #FFF; 
			padding: 20upx 100upx;
			margin: 40upx 200upx;
			font-size: 30upx;
			border-radius: 10upx;
			text-align: center;
		}
	}
</style>